使用多個 useEffect 達成關注點分離

Hook 讓我們根據程式碼的作用來拆分程式碼，使用 Hooks 可以讓我們把程式功能邏輯劃分清楚，在閱讀程式碼時更容易理解，而不用在每個生命週期拚湊程式碼片段。

多個 useEffect，擁有個別對應的 state，可以使程式更易於理解與使用

// Import useEffect and useState hooks from React:
import { useEffect, useState } from 'react'

function App(props) {
  // Create few states:
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')
  const [age, setAge] = useState(0)
  const [email, setEmail] = useState(0)

  // Use few useEffect hooks to manage multiple side-effects:
  
  // Initial render
  useEffect(() => {
    // Run something only on initial render.
  }, []) // <= Pass [] as dependencies.

  // 當姓名更新
  useEffect(() => {
    // Run something only when firstName and lastName change.
  }, [firstName, lastName]) // <= Pass firstName and lastName as dependencies.

  // 當年齡更新
  useEffect(() => {
    // Run something only when age changes.
  }, [age]) // <= Pass age as dependencies.

  // 當 Email 更新
  useEffect(() => {
    // Run something only when email changes.
  }, [email]) // <= Pass email as dependencies.
}

useEffect 的 cleanup 在每次更新時執行

如果是 class component 只會在 Unmount 時執行一次，但useEffect 的 cleanup 會在每次更新時執行，這種設計方式可以幫助寫出 bug 更少的 compoennt

class component

以下是要在「在 component mount 後訂閱好友狀態，並在 unmount 期間取消訂閱」的 class component 範例

若是讓 component 的 props.friend 發生變化，則必需要加上 componentDidUpdate 來做對應處理

function component

你會發現這一系列訂閱及取消訂閱的呼叫，都是有對應的。

useEffect 的 cleanup 在每次更新時執行，會確保程式碼一致性，並防止 class component 中常見的由於缺少更新邏輯而導致的 bug。

比對變數更新，用以略過不必要的執行

class component

使用 prevProps 或 prevState 比對條件來略過執行

function component

使用 useEffect 的第二個參數 - dependency list，透過把要觀察變更的 props 或 state 加入 dependency list，只有有變更時才會執行 effection function 的內容。

除了 effect function 可以在變數變更新時才執行，cleanup function 也適用。

Next

學會 useState 及 useEffect 後，除了程式邏輯能被劃分清楚為相關聯的功能區塊，也可以將一些經常使用的元件功能邏輯提取成為共用 function，接下來就要介紹如何把這些可複用的邏輯，打造成自定義的 Hook。

Reference

https://zh-hant.reactjs.org/docs/hooks-effect.html

https://blog.alexdevero.com/react-useeffect-hook/